import React, { useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom'

import { MenuUnfoldOutlined, CameraOutlined, EnvironmentOutlined, UserOutlined, PhoneOutlined } from '@ant-design/icons';

import { Input, message, Badge } from 'antd';
import { Button, Picker, Image, ImageViewer, Toast, Dialog } from 'antd-mobile'

import styles from './index.module.css'

import { jumpTo } from '../../utils/jump'
//api
import { getWxOpenId, getAddress, getWxJsConfig, submitCase } from '../../utils/axiosRequest/api'
//微信js配置
import { generateParams } from "../../utils/wx/wxConfig"

const basicColumns = [
    [
        { label: '1、暴露垃圾', value: '暴露垃圾111' },
        { label: '2、暴露垃圾', value: '暴露垃圾222' },
        { label: '3、暴露垃圾', value: '暴露垃圾333' },
        { label: '4、暴露垃圾', value: '暴露垃圾444' },
        { label: '5、暴露垃圾', value: '暴露垃圾555' },
    ],

]

function CaseReport() {
    //导航
    const navigate = useNavigate()
    //微信JSSDK
    const wx = React.useRef();
    //微信ID-唯一标识
    const [wxId, setWxId] = useState('');
    //消息提示
    const [messageApi, contextHolder] = message.useMessage();
    //微信获取当前位置信息
    const [resLocation, setResLocation] = useState();
    //当前位置-逆地理编码后的详细信息
    const [loaction, setLoaction] = useState('正在定位中...');
    //本地图片数组
    const [localIds, setLocalIds] = useState([]);
    //上传微信服务器成功后的图片id
    const [serverIds, setServerIds] = useState([]);
    //文本域
    const { TextArea } = Input;
    //案件类型选择框状态
    const [pickerCaseVisible, setPickerCaseVisible] = useState(false)
    //案件类型选择框加载状态
    const [isCasePicekLoad, setIsCasePicekLoad] = useState(false)
    //案件类型内容
    const [pickerCaseValue, setPickerCaseValue] = useState('-请选择案件类型-')

    //[]空数组相当于componentDidMount
    useEffect(() => {
        initData()
        return () => {
        }
    }, []);

    function initData() {
        //初始化微信js
        wx.current = window.wx;
        //设置页面标题
        document.title = '案件上报'
        //获取微信公众号唯一标识
        getWXCode();
        //获取js配置
        getWxjs()
    }

    function getWXCode() {
        //当前url,要拿到code换取微信唯一标识
        //处理url->当前网页的URL，不包含#及其后面部分
        const url = window.location.href.split('#')[0]
        //获取用户唯一标识,先获取url中的code
        const urlObj = new URL(url);
        //使用URLSearchParams获取所有参数
        const paramsList = new URLSearchParams(urlObj.search);
        //使用forEach遍历所有参数
        const allParams = {};
        paramsList.forEach((value, key) => {
            allParams[key] = value;
        });
        //1、拿到code
        const code = allParams.code;
        //2、通过code换取access_token->最后得到唯一标识openid
        const params = new Map()
        params.set('code', code)
        getWxOpenId(params)
            .then(response => {
                const data = response.data
                if (data.code === '000') {
                    setWxId(data.data.openid);
                } else {
                    //处理失败
                    messageApi.open({ type: 'error', content: data.des });
                }
            })
            .catch(error => {
                messageApi.open({ type: 'error', content: error.message });
            });
    }

    function getWxjs() {
        //根据当前url获取注册参数
        const url = window.location.href.split('#')[0]
        const params = new Map()
        params.set('hrefUrl', url)
        getWxJsConfig(params)
            .then(response => {
                const data = response.data
                if (data.code === '000') {
                    initWxJsConfig(data.data)
                } else {
                    //处理失败
                    messageApi.open({ type: 'error', content: data.des });
                }
            })
            .catch(error => {
                messageApi.open({ type: 'error', content: error.message });
            });
    }

    //注册微信公众号js
    function initWxJsConfig(data) {
        //注册配置
        wx.current.config(generateParams(data));
        wx.current.ready(function () {
            // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，
            //所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。

            //隐藏所有非基础按钮接口
            wx.current.hideAllNonBaseMenuItem()

            //获取地理位置
            wx.current.getLocation({
                type: 'gcj02', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
                success: function (res) {
                    let latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
                    let longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
                    let speed = res.speed; // 速度，以米/每秒计
                    let accuracy = res.accuracy; // 位置精度
                    setResLocation(res);
                    initAddress(res);
                },
                fail: function (res) {
                    messageApi.open({ type: 'error', content: res.errMsg });
                    setLoaction('定位失败')
                }
            });
        });
    }

    function initAddress(res) {
        //逆地理编码
        const params = new Map()
        params.set('latitude', res.latitude)
        params.set('longitude', res.longitude)
        getAddress(params)
            .then(response => {
                const data = response.data
                if (data.code === '000') {
                    if (data.data.status === '000') {
                        setLoaction(data.data.recommend)
                    } else {
                        //不是指定区域
                        Dialog.alert({
                            maskClickable: false,
                            content: data.data.recommend,
                            onConfirm: () => {
                                wx.current.closeWindow();
                            },
                        })
                    }

                } else {
                    //处理失败
                    setLoaction(data.des)
                    messageApi.open({ type: 'error', content: data.des });
                }
            })
            .catch(error => {
                setLoaction(error.message)
                messageApi.open({ type: 'error', content: error.message });
            });
    }

    //打开微信地图
    function openMap() {
        if (loaction === '定位失败' || loaction === '正在定位中...') {
            messageApi.open({ type: 'error', content: '正在定位中...' });
            return
        }
        wx.current.openLocation({
            latitude: resLocation.latitude, // 纬度，浮点数，范围为90 ~ -90
            longitude: resLocation.longitude, // 经度，浮点数，范围为180 ~ -180。
            name: loaction, // 位置名
            address: '', // 地址详情说明
            scale: 18, // 地图缩放级别,整型值,范围从1~28。默认为最大
            infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
        });
    };

    //打开相机
    function openCamera() {
        const picSize = localIds.length
        if (picSize > 2) {
            messageApi.open({ type: 'error', content: '最多只能上传3张照片' });
            return
        }
        wx.current.chooseImage({
            count: 1, // 默认9
            sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
            sourceType: ['camera'], // 可以指定来源是相册还是相机，默认二者都有
            success: function (res) {
                let localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                const locaId = localIds[0]; //localIds是个数组
                uploadPic(locaId)
            }
        });
    }

    //上传图片至微信服务器
    function uploadPic(locaId) {
        wx.current.uploadImage({
            localId: locaId, // 需要上传的图片的本地ID，由chooseImage接口获得
            isShowProgressTips: 1, // 默认为1，显示进度提示
            success: function (res) {
                //添加本地图片id-用于展示
                setLocalIds([...localIds, locaId]);
                //serverId是字符串
                let serverId = res.serverId;
                //添加图片的服务ID-用于回传服务端获取图片
                setServerIds([...serverIds, serverId])

            },
            fail: function (res) {
                messageApi.open({ type: 'error', content: '上传失败：' + res.errMsg });
            }
        })
    }

    //预览图片
    function previewImg(event, index) {
        event.stopPropagation();//阻止点击事件冒泡，执行点击删除图片方法
        ImageViewer.Multi.show({ defaultIndex: index, images: localIds })
    }

    //删除图片
    function delImg(index) {
        //删除本地
        setLocalIds(localIds.filter((_, i) => i !== index));
        //删除已上传服务端id
        setServerIds(serverIds.filter((_, i) => i !== index));
        messageApi.open({ type: 'success', content: '图片已删除' });
    }

    //案件类型选择
    function clickPickCase() {
        setPickerCaseVisible(true)
    }

    //点击提交
    function submitOrder() {
        Dialog.confirm({
            content: '是确认提交？',
            confirmText: '确认',
            cancelText: '取消',
            onConfirm: () => {
                const loadToast = Toast.show({
                    maskClickable: false,
                    duration: 0,
                    icon: 'loading',
                    content: '正在提交，请稍后...',
                })
                //模拟请求
                setTimeout(() => {
                    loadToast.close()
                    //提交完成，跳转结果页面
                    jumpTo(navigate, '/reportResults', true, { resultTag: '0', caseNumber: '123456987725' })
                }, 2000);
            },
            onCancel: () => {

            },
        })
    }

    return (
        <div className={styles.root}>
            {contextHolder}
            <div className={styles.contact_person_box}>
                <span>联系名称：</span> <Input prefix={<UserOutlined />} maxLength={5} type={'text'} className={styles.inp_name} defaultValue={''} placeholder="请输入姓名..." variant="outlined" />
            </div>
            <div className={styles.contact_phone_box}>
                <span>联系方式：</span> <Input prefix={<PhoneOutlined />} type={'number'} maxLength={11} className={styles.inp_phone} defaultValue={''} placeholder="请输入手机号码..." variant="outlined" />
            </div>
            <div className={styles.item_box}>
                <div className={styles.case_item}>
                    <span className={styles.item_box_title} >案件类型：</span>
                    <Button onClick={clickPickCase} color='primary' size='small'><MenuUnfoldOutlined /> 选择</Button>
                </div>
                <div className={styles.picker_case_box}>
                    <span>{pickerCaseValue}</span>
                </div>
                <Picker
                    className={styles.case_picker}
                    loading={isCasePicekLoad}
                    confirmText={'确定'}
                    columns={basicColumns}
                    visible={pickerCaseVisible}
                    onClose={() => {
                        setPickerCaseVisible(false)
                    }}
                    value={pickerCaseValue}
                    onConfirm={v => {
                        setPickerCaseValue(v[0])
                    }}
                />
            </div>
            <div className={styles.item_box}>
                <div className={styles.case_item}>
                    <span className={styles.item_box_title} >案件位置：</span>
                    <Button onClick={openMap} color='primary' size='small'><EnvironmentOutlined /> {'位置'}</Button>
                </div>
                <div className={styles.picker_case_box}>
                    <span className={styles.multiline}>{loaction}</span>
                </div>
            </div>
            <div className={styles.item_box}>
                <span>详细描述：</span>
                <TextArea className={styles.case_problem_des} rows={4} placeholder="最多输入50个字符..." maxLength={50} />
            </div>
            <div className={styles.case_img_box}>
                <div className={styles.case_item}>
                    <span className={styles.item_box_title} >案件图片：共{localIds.length}张</span>
                    <Button onClick={openCamera} color='primary' size='small'> <CameraOutlined /> {'拍照'}</Button>
                </div>
                <div className={styles.img_box}>
                    {
                        localIds.map((image, index) => (
                            <div className={styles.img_item}>
                                <div onClick={() => { delImg(index) }}>
                                    <Badge size="small" count={'X'}>
                                        <Image style={{ borderRadius: 3 }} onClick={(event) => { previewImg(event, index) }} width={80} height={100} fit='fill' key={index} src={image} />
                                    </Badge>
                                </div>
                            </div>
                        ))
                    }
                </div>
            </div>
            <Button onClick={submitOrder} className={styles.case_submit_btn} color='primary' size='large'>提交</Button>
        </div >
    )
}

export default CaseReport;